// import { createContext, useContext } from 'react';

// const countContext = createContext(111);

// function Aaa() {
//   return <div>
//       <countContext.Provider value={222}>
//         <Bbb></Bbb>
//       </countContext.Provider>
//   </div>
// }

// function Bbb() {
//   return <div><Ccc></Ccc></div>
// }

// function Ccc() {
//   const count = useContext(countContext);
//   return <h2>context 的值为：{count}</h2>
// }

// export default Aaa;

// import { createContext, Component } from "react";

// const countContext = createContext(111);

// function Aaa() {
//   return (
//     <div>
//       <countContext.Provider value={222}>
//         <Bbb></Bbb>
//       </countContext.Provider>
//     </div>
//   );
// }
// class Ccc extends Component {
//   render() {
//     return <h2>context 的 值为：{this.props.count}</h2>;
//   }
// }

// function Bbb() {
//   return (
//     <div>
//       <countContext.Consumer>
//         {(count) => <Ccc count={count}></Ccc>}
//       </countContext.Consumer>
//     </div>
//   );
// }

// export default Aaa;

// import { memo, useEffect, useState } from "react";

// function Aaa() {
//     const [,setNum] = useState(1);

//     useEffect(() => {
//         setInterval(()=> {
//             setNum(Math.random());
//         }, 2000)
//     },[]);

//     return <div>
//         <Bbb count={2}></Bbb>
//     </div>
// }

// interface BbbProps {
//     count: number;
// }

// function Bbb(props: BbbProps) {
//     console.log('bbb render');

//     return <h2>{props.count}</h2>
// }

// export default Aaa;

// import { memo, useEffect, useState } from "react";

// function Aaa() {
//     const [,setNum] = useState(1);

//     useEffect(() => {
//         setInterval(()=> {
//             setNum(Math.random());
//         }, 2000)
//     },[])

//     return <div>
//         <MemoBbb count={2}></MemoBbb>
//     </div>
// }

// interface BbbProps {
//     count: number;
// }

// function Bbb(props: BbbProps) {
//     console.log('bbb render');

//     return <h2>{props.count}</h2>
// }
// const MemoBbb = memo(Bbb);
// export default Aaa;

// import { memo, useEffect, useState } from "react";

// function Aaa() {
//   const [, setNum] = useState(1);
//   const [count, setCount] = useState(2);

//   useEffect(() => {
//     setInterval(() => {
//       setNum(Math.random());
//     }, 2000);
//   }, []);
//   useEffect(() => {
//     setInterval(() => {
//       setCount(Math.random());
//     }, 2000);
//   }, []);

//   return (
//     <div>
//       <MemoBbb count={count}></MemoBbb>
//     </div>
//   );
// }

// interface BbbProps {
//   count: number;
// }

// function Bbb(props: BbbProps) {
//   console.log("bbb render");

//   return <h2>{props.count}</h2>;
// }
// const MemoBbb = memo(Bbb);
// export default Aaa;

import { memo, useCallback, useEffect, useMemo, useState } from "react";

function Aaa() {
  const [, setNum] = useState(1);
  const [count, setCount] = useState(2);

  useEffect(() => {
    setInterval(() => {
      setNum(Math.random());
    }, 2000);
  }, []);
  const bbbCallback = useCallback(function () {
    //xxx
  }, []);
  const count2 = useMemo(() => {
    return count * 10;
  }, [count]);
  return (
    <div>
      <MemoBbb count={count2} callback={bbbCallback}></MemoBbb>
    </div>
  );
}

interface BbbProps {
  count: number;
  callback: Function;
}

function Bbb(props: BbbProps) {
  console.log("bbb render");

  return <h2>{props.count}</h2>;
}
const MemoBbb = memo(Bbb);
export default Aaa;
